<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="all">
      <el-tab-pane name="banzu">
        <span slot="label">班组问题项</span>
        <div class="liucheng">
          <div class="search">
            <el-input
              width="80%"
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>
            <!-- <el-button size="small" type="success" @click="addClassify">新增一级分类</el-button> -->
          </div>
          <el-tree
            :data="threeData1"
            node-key="id"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            :props="defaultProps"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}{{data.orders === '1' ? ' - Ⅰ级' : data.orders === '2' ? ' - Ⅱ级' : data.orders === '3' ? ' - Ⅲ级' : data.orders === '4' ? ' - Ⅳ级' : '' }}</span>
              <span>
                <el-button v-if="data.levels === '1'" type="text" size="mini" @click="() => look(data)">查看</el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </el-tab-pane>
      <el-tab-pane name="chejian">
        <span slot="label">车间问题项</span>
        <div class="liucheng">
          <div class="search">
            <el-input
              width="80%"
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>
            <!-- <el-button size="small" type="success" @click="addClassify">新增车间</el-button> -->
          </div>
          <el-tree
            :data="threeData2"
            node-key="id"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            :props="defaultProps"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}{{data.orders === '1' ? ' - Ⅰ级' : data.orders === '2' ? ' - Ⅱ级' : data.orders === '3' ? ' - Ⅲ级' : data.orders === '4' ? ' - Ⅳ级' : '' }}</span>
              <span>
                <el-button type="text" size="mini" @click="() => look(data)">查看</el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import{ uploadFile } from '@/api/people'
import { getAnquanMulu,getAllchejian } from "@/api/oneclassify"
export default {
  data() {
    return {
      activeName: 'banzu',
      filterText: '',  //筛选的条件
      threeData1: [],   //分类数据
      threeData2: [],   //分类数据
      defaultProps:{
        children: 'childsList',
        label: 'name'
      },
    };
  },
  mounted() {
    this.getbanzulist();
    this.getchejianlist();
  },
  methods: {
    seach(){
      this.getList(this.resultContent)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getbanzulist(){
      getAnquanMulu({}).then(res => {
        console.log(res)
        this.threeData1 = res.data
      })
    },
    getchejianlist(){
      getAllchejian({}).then(res => {
        console.log(res)
        this.threeData2 = res.data
      })
    },
    handleClick(e){
      console.log(e)
    },
    getList(id,reslut) {
      selectProblemResult({
        resultContent: reslut
      }).then(res => {
        console.log(res);
        this.tableData = res.data;
        // this.total = res.data.total;
        this.loading = false;
      });
    },
    look(item){
      this.$router.push({
        name: 'Problemlist'
      })
      localStorage.setItem('wentixiang',JSON.stringify(item))
    },
    /**
     * 编辑问题
     */
    write(item, index) {
      this.$router.push({
        name: 'Writeproblem',
        params: {
          options: JSON.stringify(item)
        }
      })
    },
    deleteRow(item) {
      console.log(item) 
      console.log("删除");
      deleteProblemResult(item.rid).then(res => {
        console.log(res);
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        this.getList();
      });
    },
    goPrev(page) {
      console.log(page)
      this.page--
      this.getList()
    },
    goNext(page) {
      console.log(page)
      this.page++
      this.getList()
    },
    goPage(page){
      console.log(page)
      this.page = page
      this.getList()
    },
    designUpAvatar(item){
      console.log(this.fileNum)
      var formData = new FormData()
      const loading = this.$loading({
        lock: true,
        text: '上传中请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      })
      formData.append("file", item.file)
      uploadFile(formData).then(res => {
        console.log(res)
        this.$message({
          showClose: true,
          message: '添加成功',
          type: "success"
        })
        loading.close()
        // this.imageUrl = res
        this.tempData.imgurl = res
        this.$forceUpdate()
      }).catch(() => {
        loading.close()
      })
    },
    resetList() {
      this.content = "";
    },
    addpeople() {
      this.$router.push({
        name:'Writeproblem'
      })
    }
  }
};
</script>

<style lang="scss" scoped>

.avatars{
	width: 45px;
	height: 45px;
  margin: 0 auto;
  border: 1px solid #ccc
}
.all{
  background: #fff;
  padding: 5px 20px 20px 20px;
  border-radius: 10px;
  // margin-top: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
/deep/.el-tabs__item.is-active {
  color: #18a05e;
}
/deep/.el-tabs__active-bar {
  background-color: #18a05e;
}
/deep/.el-tabs__item:hover {
  color: #18a05e;
  cursor: pointer;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.search{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  // /deep/.el-input{
  //   width: 85%;
  // }
}
.app-container{
  padding: 20px;
}
.liucheng{
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.ellisp{
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-align: left;
}
.app-container {
  padding: 10px;
}
.rolestip {
  width: 100%;
  display: flex;
  justify-content: center;
}

</style>
